<script lang="ts" setup>
import type { ExportExcelFormState, ExportExcelOption } from './exportExcelOption'
import type { Rule } from 'ant-design-vue/lib/form'

type Props = {
  option: ExportExcelOption
}
// 表单Ref
const formRef = ref()
// props
const { option } = defineProps<Props>()
// 加载状态
const loading = ref(false)
// 表单数据
const formState = reactive<ExportExcelFormState>({
  where: 'all'
} as ExportExcelFormState)

// 表单验证规则
const formRule: Record<string, Rule[]> = {
  fileName: [
    {
      required: true,
      message: '请输入文件名',
      trigger: 'blur'
    }
  ]
}
// 暴露给父组件的方法
function getRef() {
  return formRef.value
}
// 设置loading状态
function setLoading(value: boolean) {
  loading.value = value
}

defineExpose({ getRef, setLoading })
</script>

<template>
  <div class="exportExcel">
    <a-spin :spinning="loading" tip="导出中...">
      <a-form
        ref="formRef"
        :labelCol="{ style: { width: '80px' } }"
        :model="formState"
        :rules="formRule"
        label-align="left"
      >
        <a-row>
          <a-col :span="24">
            <a-form-item label="导出条件" name="where">
              <a-radio-group v-model:value="formState.where as any">
                <a-radio value="all">全部数据</a-radio>
                <a-radio value="query">当前查询条件</a-radio>
                <a-radio value="select">当前选上数据</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="文件名" name="fileName">
              <a-input v-model:value="formState.fileName" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </div>
</template>

<style scoped>
.exportExcel {
  padding: 10px 0;
}
</style>
